<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3D转换模块-</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		ul{
			width: 200px;
			height: 200px;
			border: 1px solid black;
			box-sizing: border-box;	
			margin: 100px auto;
			position: relative;
			transform: rotateY(30deg) rotateX(15deg);
			transform-style: preserve-3d;
			perspective: 500px;
		}
		ul li{
			list-style: none;
			text-align: center;
			width: 200px;
			height: 200px;
			line-height: 200px;
			font-size: 80px;
			/* box-sizing: border-box; */
			position: absolute;
		}
		
		
		 ul li:nth-child(1) {
			background-color: green;
			transform: translate(-100px, 0) rotateY(90deg);
		}
		ul li:nth-child(2) {
			background-color: yellow;
			transform: translate(100px, 0) rotateY(90deg);
		}
		ul li:nth-child(3) {
			background-color: blue;
			transform: translate(0, -100px) rotateX(90deg);
		}
		ul li:nth-child(4) {
			background-color: purple;
			transform: translate(0, 100px) rotateX(90deg);
		}
		ul li:nth-child(5) {
			background-color: pink;
			transform: translateZ(-100px);
		}
		ul li:nth-child(6) {
			background-color: orange;
			transform: translateZ(100px);
		}
		


	</style>
</head>
<body>
	
	<!-- 要给一个元素呈现3D展示和透视一样，需要给父元素添加一个transform-style属性 transform-style: preserve-3d即可 -->


	<h2>正方体</h2>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>
</body>
</html>